import { useDarkTheme, useMediaQuery } from './hooks';
import DocsGPT3 from './assets/cute_docsgpt3.svg';

export default function Hero({ className = '' }: { className?: string }) {
  // const isMobile = window.innerWidth <= 768;
  const { isMobile } = useMediaQuery();
  const [isDarkTheme] = useDarkTheme();
  return (
    <div
      className={`mt-14 mb-32 flex flex-col text-black-1000 dark:text-bright-gray lg:mt-6`}
    >
      <div className=" mb-2 flex items-center justify-center sm:mb-10">
        <p className="mr-2 text-4xl font-semibold">chatCRO GPT🐖</p>
        {/* <img className="mb-2 h-14" src={DocsGPT3} alt="chatCRO GPT" /> */}
      </div>
      {isMobile ? (
        <p className="mb-3 text-center leading-6">
          欢迎来到<span className="font-bold">chatCRO GPT</span>，您的技术文档助手！请在下方输入框中输入您的查询，
          我们将为您提供最相关的答案。
        </p>
      ) : (
        <>
          <p className="mb-3 text-center leading-6">
            欢迎来到chatCRO GPT，您的技术文档助手！
          </p>
          <p className="mb-3 text-center leading-6">
            输入与您选择的文档相关的查询，
            <br />我们将为您提供最相关的答案。
          </p>
          <p className="mb-3 text-center leading-6">
            请在下方输入框中输入您的查询，我们将为您提供帮助！
          </p>
        </>
      )}
 <div
  className={`mt-0 flex flex-wrap items-center justify-center gap-2 sm:mt-1 sm:gap-4 md:gap-4 lg:gap-0`}
>
  {/* 第一块 */}
    <div className="h-auto rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70  via-[#3B82F6] to-[#9333EA]/50 p-1 dark:from-[#D16FF8] dark:via-[#48E6E0] dark:to-[#C85EF6] lg:h-60  lg:rounded-tr-none lg:rounded-br-none">
      <div
        className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${
          isMobile ? '3.5' : '6 py-8'
        }  lg:rounded-tr-none lg:rounded-br-none`}
      >
        {/* 在此处添加移动端检查 */}
        {isMobile ? (
          <div className="flex justify-center">
            <img
              src={
                isDarkTheme ? '/message-text-dark.svg' : '/message-text.svg'
              }
              alt="锁"
              className="h-[24px] w-[24px] "
            />
            <h2 className="mb-0 pl-1 text-lg font-bold">
              与您的数据对话
            </h2>
          </div>
        ) : (
          <>
            <img
              src={
                isDarkTheme ? '/message-text-dark.svg' : '/message-text.svg'
              }
              alt="锁"
              className="h-[24px] w-[24px]"
            />
            <h2 className="mt-2 mb-3 text-lg font-bold">
              与您的数据对话
            </h2>
          </>
        )}
        <p
          className={
            isMobile
              ? `w-[250px] text-center text-xs text-gray-500 dark:text-bright-gray`
              : `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
          }
        >
          chatCRO GPT将使用您的数据来回答问题。无论是文档、源代码还是Microsoft文件，chatCRO GPT都允许您进行互动式对话，并根据提供的数据找到答案。
        </p>
      </div>
    </div>
    {/* 第二块 */}
    <div className="h-auto rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 dark:from-[#D16FF8] dark:via-[#48E6E0] dark:to-[#C85EF6] lg:h-60  lg:rounded-none  lg:py-1 lg:px-0">
      <div
        className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${
          isMobile ? '3.5' : '6 py-6'
        }  lg:rounded-none`}
      >
        {/* 在此处添加移动端检查 */}
        {isMobile ? (
          <div className="flex justify-center ">
            <img
              src={isDarkTheme ? '/lock-dark.svg' : '/lock.svg'}
              alt="锁"
              className="h-[24px] w-[24px]"
            />
            <h2 className="mb-0 pl-1 text-lg font-bold">
              安全数据存储
            </h2>
          </div>
        ) : (
          <>
            <img
              src={isDarkTheme ? '/lock-dark.svg' : '/lock.svg'}
              alt="锁"
              className="h-[24px] w-[24px]"
            />
            <h2 className="mt-2 mb-3 text-lg font-bold">
              安全数据存储
            </h2>
          </>
        )}
        <p
          className={
            isMobile
              ? `w-[250px] text-center text-xs text-gray-500 dark:text-bright-gray`
              : `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
          }
        >
          您的数据安全是我们的首要任务。chatCRO GPT确保为您的敏感信息提供最高级别的保护。通过安全的数据存储和隐私措施，您可以信赖您的数据是安全且保密的。
        </p>
      </div>
    </div>
    {/* 第三块 */}
    <div className="h-auto rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70  via-[#3B82F6] to-[#9333EA]/50 p-1 dark:from-[#D16FF8] dark:via-[#48E6E0] dark:to-[#C85EF6] lg:h-60 lg:rounded-tl-none lg:rounded-bl-none ">
      <div
        className={`firefox h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${
          isMobile ? '3.5' : '6 px-6 '
        } lg:rounded-tl-none lg:rounded-bl-none`}
      >
        {/* 在此处添加移动端检查 */}
        {isMobile ? (
          <div className="flex justify-center">
            <img
              src={
                isDarkTheme
                  ? 'message-programming-dark.svg'
                  : '/message-programming.svg'
              }
              alt="锁"
              className="h-[24px] w-[24px]"
            />
            <h2 className="mb-0 pl-1 text-lg font-bold">
              私有化部署
            </h2>
          </div>
        ) : (
          <>
            <img
              src={
                isDarkTheme
                  ? '/message-programming-dark.svg'
                  : '/message-programming.svg'
              }
              alt="锁"
              className="h-[24px] w-[24px]"
            />
            <h2 className="mt-2 mb-3 text-lg font-bold">
              私有化部署
            </h2>
          </>
        )}
        <p
          className={
            isMobile
              ? `w-[250px] text-center text-xs text-gray-500 dark:text-bright-gray`
              : `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
          }
        >
          开发人员能基于chatCRO GPT、增强和定制应用程序以满足他们的特定需求。
        </p>
      </div>
    </div>
  </div>
    </div>
  );
}
